<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link href="zui/css/zui.min.css" rel="stylesheet">
<link href="zui/lib/bootbox/bootbox.min.css" rel="stylesheet">
<link href="css/bootstrap-table.min.css" rel="stylesheet">
<style type="text/css">
body{
	font-size: 14px;
	/*background: url(img/bg.png) repeat-x center top;*/
}
</style>
 <!-- jQuery (ZUI中的Javascript组件依赖于jQuery) -->
    <script src="js/jquery-2.1.1.min.js"></script>
    <!-- ZUI Javascript组件 -->
    <script src="zui/js/zui.min.js"></script>
    <script src="zui/lib/bootbox/bootbox.min.js"></script>
    <script src="js/bootstrap-table.min.js"></script>
	<script src="js/bootstrap-table-zh-CN.min.js"></script>
	<script src="js/common.js"></script>
 	<script src="layer/layer.js"></script>
<script type="text/javascript">
	var nowSelectRow;
$(function(){
	$("#synchJinDu").hide();
	//bootbox.alert("Your message here…");
	$('#dtable').bootstrapTable({
		//url: 'data1.json',
		search:true,
		toolbar:"#mytoolbar",
		columns: [{
			field: 'account',
			title: '账号'
		},{
			field:'passwordStr',
			title:'密码',
			formatter:function(value,row,index){
				return '******';
			}
		}, {
			field: 'remarkStr',
			title: '备注'
		}, {
			field: 'passId',
			title: '操作',
			formatter:function(value,row,index){
				return '<button type="button" onclick="deleteItem();" class="btn btn-primary">删除</button><button type="button" onclick="editItem(\''+value+'\');" class="btn btn-primary">修改</button>';
			}
		}],
		onDblClickCell:function(field, value, row, $element){
			//双击某一个单元格value
			if(field=='account'|| field=='passwordStr'){
				var jobj=JSON.parse(app.copyContent(field,row.passId));
				if (jobj.flag){
					layer.msg(jobj.msg);
				}else{
					layer.alert(jobj.msg, {icon: 0});
				}
			}else if(field=='remarkStr'){
				var jobj=JSON.parse(app.showRemark(row.passId));
				if (jobj.flag){
					layer.open({
						type: 1,
						title:'备注信息',
						skin: 'layui-layer-rim', //加上边框
						area: ['420px', '240px'], //宽高
						content: jobj.remark
					});
				}else{
					layer.alert(jobj.msg, {icon: 0});
				}
			}

		}/*,
		onClickRow:function (row,$element) {
			if()
			$($element).css('background-color','#3CB371');
		}*/
	});
	//加载数据
	setTimeout("loadAllData()",90);
	//加载分类
	setTimeout("loadAllFenLeiData()",90);
});
	var indexObj={
		validatePassGenSetting:function (value,msg) {
			if(isNaN(value)||value>9){
				layer.alert(msg, {icon: 0});
				return false;
			}
			return true;
		},
		lock:function(){
			window.location='login.html';
		}
	}
function loadAllFenLeiData() {
	var s=app.getAllFenLei();
	var allFenLei=JSON.parse(s);
	if(allFenLei.flag){
		//$("#out").text(allFenLei.allDirType[0].dirId);
		$.each(allFenLei.allDirType,function (i,n) {
			$("#menuStart").after("<li role=\"presentation\" ><a role=\"menuitem\" tabindex=\"-1\" href=\"javascript:switchfl('"+n.dirId+
					"','"+n.dirName+"');\">"+n.dirName+"</a></li>");
			//添加密码面板分类
            document.getElementById("add_fenlei").options.add(new Option(n.dirName,n.dirId));
		})
	}else{
		bootbox.alert(allFenLei.msg);
	}

}
function loadAllData() {
	var s=app.getAllPassItem();
	var allData=JSON.parse(s);
	if(allData.flag){
		//$("#out").text(s);
		$('#dtable').bootstrapTable('load', allData.allPassItem);
	}else{
		bootbox.alert(allData.msg);
	}

}
function editItem(value){
	//var rows=$("#dtable").bootstrapTable('getRowByUniqueId',1);
	//var rows=$('#dtable').bootstrapTable('getSelections');

		var jobj=JSON.parse(app.getPassItemText(value));
		if(jobj.flag){
			$("#addPassItem").modal('show');
			$("#add_account").val(jobj.item.account);
			$("#add_password").val(jobj.item.passwordStr);
			$("#add_beizhu").val(jobj.item.remarkStr);
			$("#add_fenlei  option[value="+jobj.item.dirTypeId+"]").attr("selected", true);
		}else{
			layer.alert(jobj.msg, {icon: 0});
		}

}
function deleteItem() {
	var rows=$('#dtable').bootstrapTable('getSelections');
	if (rows.passId){
		layer.confirm('您确定要删除该条记录？', {
			btn: ['确定','取消'] //按钮
		}, function(){
			var jobj=JSON.parse(app.deleteItem(rows.passId));
			if (jobj.flag){
				layer.msg('删除成功', {icon: 1});
			}else{
				layer.alert(jobj.msg, {icon: 0});
			}
			//layer.msg('的确很重要', {icon: 1});
		}, function(){
			/*layer.msg('也可以这样', {
			 time: 20000, //20s后自动关闭
			 btn: ['明白了', '知道了']
			 });*/
		});
	}
}
function showvalue(obj){
	bootbox.alert(obj);
}
function showAlert(){
	bootbox.dialog({
		message:'<input type="text" class="form-control" placeholder="用户名"><br>'+
		'<input type="text" class="form-control" placeholder="用户名"><br>'
	});
}
function clicktr(o){
	var tds=$(o).find("td");
	bootbox.alert(tds.length);
}
function flgl(){
	$('#fltable').bootstrapTable({
		url: 'fenlei.json',
		toolbar:"#flgltoolbar",
		columns: [{
			field: 'id',
			title: 'Item ID'
		}, {
			field: 'name',
			title: 'Item Name'
		}, {
			field: 'price',
			title: 'Item Price',
			formatter:function(value,row,index){
				return "<button type='button' onclick='deleteFl(\""+row.name+"\",\""+row.id+
						"\");' class='btn btn-danger'><i class='icon icon-remove-circle'></i>删除</button><button type='button' onclick='showRow();' class='btn btn-primary'><i class='icon icon-edit'></i>重命名</button>";
			}
		}],
		onDblClickRow:function(row, $element){
			bootbox.alert(row.id);
		} 
	});
	$("#flgltoolbar").attr("class","btn-toolbar show");//显示工具栏
	$('#myModal').modal('toggle', 'center');
}
function deleteFl(name,flid){
	bootbox.alert(name+","+flid);
}
//需要传入的参数，分类ID，分类名称
function switchfl(flid,flname){
	//bootbox.alert(flid);
	$("#dropdownMenu1Text").text(flname);
	var s=app.getPassItemByDirId(flid);
	var jobj=JSON.parse(s);
	if(jobj.flag){
		$('#dtable').bootstrapTable('load', jobj.passitems);
	}else{
		bootbox.alert(jobj.msg);
	}
}
function syncher() {
	layer.open({
		type: 1,
		area: ['500px', '100px'],
		content: $('#synchJinDu'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
		cancel:function (index,layero) {
			layer.confirm('您是如何看待前端开发？', {
				btn: ['确定','取消'] //按钮
			}, function(){
				layer.msg('您取消了数据同步！', {icon: 1});
				layer.close(index);
			});
			return false;
		}
	});
	//$('#myModal').modal('toggle', 'center')
}
function addFenLei() {
	var name=$("#fenLeiName").val();
	var jobj=JSON.parse(app.addFenLei(name));
	if(jobj.flag){
		clearModelInput("addFenLei");
		$("#addFenLei").modal('hide');
		bootbox.alert('新增成功！');
	}else{
		bootbox.alert(jobj.msg);
	}
}
function genPass() {
	var jobj=JSON.parse(app.getPass());
	if (jobj.flag){
		//document.getElementById("add_password").value=jobj.pass;
		$("#add_password").val(jobj.pass+"");
	}else{
		layer.alert(jobj.msg, {icon: 0});
	}

}
function settingGenManager() {
	var jobj=JSON.parse(app.getPassGenConfig());
	if(jobj.flag){
		$("#daxiezimu").val(jobj.config.strQuanZhong);
		$("#xiaoxiezimu").val(jobj.config.xiaoXieStrQuanZhong);
		$("#shuzi").val(jobj.config.numQuanZhong);
		$("#teshufuhao").val(jobj.config.fuhaoQuanZhong);
		$("#mimachangdu").val(jobj.config.passLength);
		$('#settingPassGenDiv').modal('show');
	}else{
		layer.alert(jobj.msg, {icon: 0});
	}
}
function addPassItem() {
	var _account=$("#add_account").val();
	if(_account.length<1){
		layer.alert('账号不能为空', {icon: 0});
		return;
	}
	var _pass=$("#add_password").val();//获取到的密码也是空的
	if(_pass.length<1){
		layer.alert('密码不能为空', {icon: 0});
		return;
	}
    var flobj=document.getElementById("add_fenlei");
	var _fenlei=flobj.options[flobj.selectedIndex].value;//$("#add_fenlei").val();//获取到的分类是空的
	var _beizhu=$("#add_beizhu").val();
	var jobj=JSON.parse(app.addPassItem(_account,_pass,_fenlei,_beizhu));
	if(jobj.flag){
		$("#addPassItem").modal('hide');
		clearModelInput("addPassItem");
		layer.msg('新增成功！');
		//bootbox.alert('新增成功！');
		loadAllData();
	}else{
		bootbox.alert(jobj.msg);
	}
}
function guanyu() {
	layer.open({
		type: 1,
		area:['300px','200px'],
		title:'关于OnePass',
		skin: 'layui-layer-demo', //样式类名
		closeBtn: 0, //不显示关闭按钮
		anim: 4,
		shadeClose: true, //开启遮罩关闭
		content: "<div style='text-align: center;'>版本号: <span style='font-weight: 700;color: #ff250f'>onepass-build-5.0.1 </span><br/>官网：http://www.onepass.vip</div>"
	});
	//layer.alert('见到你真的很高兴', {icon: 0});
}
function saveGenSetting() {
	var strQuanZhong=$("#daxiezimu").val();
	if(!indexObj.validatePassGenSetting(strQuanZhong,"大写字母的配置必须为数字且小于9！")){
		return;
	}
	var xiaoXieStrQuanZhong=$("#xiaoxiezimu").val();
	if(!indexObj.validatePassGenSetting(xiaoXieStrQuanZhong,"小写字母的配置必须为数字且小于9！")){
		return;
	}
	var numQuanZhong=$("#shuzi").val();
	if(!indexObj.validatePassGenSetting(numQuanZhong,"数字的配置必须为数字且小于9！")){
		return;
	}
	var fuhaoQuanZhong=$("#teshufuhao").val();
	if(!indexObj.validatePassGenSetting(fuhaoQuanZhong,"特殊符号的配置必须为数字且小于9！")){
		return;
	}
	var passLength=$("#mimachangdu").val();
	if(isNaN(passLength)||passLength>512){
		layer.alert("密码长度的配置必须位数字且密码长度不超过512位！", {icon: 0});
		return;
	}
	var jobj=JSON.parse(app.savePassGenSetting(strQuanZhong,xiaoXieStrQuanZhong,numQuanZhong,fuhaoQuanZhong,passLength));
	if (jobj.flag){
		$('#settingPassGenDiv').modal('hide');
		layer.msg('密码生成器配置信息保存成功！');
	}else{
		layer.alert(jobj.msg, {icon: 0});
	}
}
function showAddPassItem() {
	$("#add_beizhu").val("");
	$("#add_password").val("");
	$("#add_account").val("");
	$("#add_fenlei option").eq(0).attr("selected",true);
	$("#addPassItem").modal('show');
}
</script>
</head>
<body>

<div class="panel">
	<table id="dtable"></table>
</div>
<div id="mytoolbar" class="btn-toolbar" role="toolbar">

<button type="button" class="btn dropdown-toggle" id="dropdownMenu1"
			data-toggle="dropdown">
		<span id="dropdownMenu1Text">全部分类</span>
		<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
		<li id="menuStart" role="presentation" class="dropdown-header">下拉菜单标题</li>
		<!-- <li role="presentation" >
			<a role="menuitem" tabindex="-1" href="javascript:switchfl('a');">常用</a>
		</li>-->
		<li role="presentation" class="divider"></li>
			<li role="presentation">
				<a role="menuitem" tabindex="-1" href="javascript:switchfl('all','全部分类');">全部分类</a>
			</li>
		<li role="presentation" class="divider"></li>
		<li role="presentation" class="dropdown-header">下拉菜单标题</li>
		<li role="presentation">
			<a role="menuitem" tabindex="-1" href="javascript:flgl();">分类管理</a>
		</li>
	</ul>
<div class="btn-group">
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#addFenLei">添加分类</button>
    <button type="button" class="btn btn-default" onclick="showAddPassItem();">添加密码</button>
 </div>
<div class="btn-group">
    <button type="button" class="btn btn-default">首选项</button>
    <button type="button" class="btn btn-default" onclick="guanyu();">关于</button>
    <button type="button" class="btn btn-default">帮助</button>
</div>
<div class="btn-group">
    <button type="button" onclick="javascript:indexObj.lock();" class="btn btn-default">锁定</button>
    <button type="button" onclick="syncher();"  class="btn btn-default">同步</button>
</div>
</div>
    <!-- 分类管理对话框HTML -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
    <div class="panel">
	  <div class="panel-body">
	    <table id="fltable"></table>
	  </div>
	</div>
      
    </div>
  </div>
</div>
<div id="flgltoolbar" class="btn-toolbar hidden" role="toolbar">
	<div class="btn-group">
	    <button type="button" class="btn btn-default"><i class="icon icon-plus"></i></button>
	</div>
</div>
<div class="modal fade" id="myLgModal">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
				<h4 class="modal-title">标题</h4>
			</div>
			<div class="modal-body">
				<div class="input-group">
					<span class="input-group-addon"><i class="icon icon-user"></i></span>
					<input type="text" class="form-control" placeholder="用户名">

					</div>
				<div class="input-group">
					<span class="input-group-addon"><i class="icon icon-key"></i></span>
					<input type="password" class="form-control" placeholder="密码">
					<span class="input-group-btn">
						<button class="btn btn-default" type="button">自动生成</button>
					</span>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>
<!-- 添加分类对话框-->
<div class="modal fade" id="addFenLei">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
				<h4 class="modal-title">添加分类</h4>
			</div>
			<div class="modal-body">
				<div class="input-group">
					<span class="input-group-addon"><i class="icon icon-user"></i></span>
					<input type="text" class="form-control" id="fenLeiName" placeholder="分类名称">

				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" onclick="addFenLei();">添加</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 添加密码项-->
<div class="modal fade" id="addPassItem">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
				<h4 class="modal-title">添加密码</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="add_account" class="col-sm-2">账号</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="add_account" placeholder="您的账号">
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2" for="add_password">密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="add_password" placeholder="您的密码">
							<button type="button" class="btn btn-default" onclick="genPass();">生成</button>
							<button type="button" class="btn btn-default" onclick="settingGenManager();">设置生成规则</button>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2" for="add_fenlei">分类</label>
						<div class="col-sm-10">
							<select class="form-control" id="add_fenlei">

							</select>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2">备注</label>
						<div class="col-sm-10">
							<textarea class="form-control" id="add_beizhu" rows="3" placeholder="在这里添加备注"></textarea>
						</div>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" onclick="addPassItem();">添加</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<!-- 配置密码生成器-->
<div class="modal fade" id="settingPassGenDiv">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
				<h4 class="modal-title">配置密码生成器</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label for="daxiezimu" class="col-sm-4">大写字母</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="daxiezimu" >
						</div>
						<label for="mimachangdu" class="col-sm-4">1-9的数字</label>
					</div>
					<div class="form-group">
						<label class="col-sm-4" for="xiaoxiezimu">小写字母</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="xiaoxiezimu" >
						</div>
						<label for="mimachangdu" class="col-sm-4">1-9的数字</label>
					</div>
					<div class="form-group">
						<label class="col-sm-4" for="shuzi">数字</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="shuzi" >
						</div>
						<label for="mimachangdu" class="col-sm-4">1-9的数字</label>
					</div>
					<div class="form-group">
						<label for="teshufuhao" class="col-sm-4">特殊符号</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="teshufuhao" >
						</div>
						<label for="mimachangdu" class="col-sm-4">1-9的数字</label>
					</div>
					<div class="form-group">
						<label for="mimachangdu" class="col-sm-4">密码长度</label>
						<div class="col-sm-3">
							<input type="text" class="form-control" id="mimachangdu" >
						</div>
						<label for="mimachangdu" class="col-sm-4">1-9的数字</label>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" onclick="saveGenSetting();">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<p id="out"></p>
<div id="synchJinDu" class="progress progress-striped active">
	<div class="progress-bar" role="progressbar progress-bar-success" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
		<span class="sr-only">40% Complete (success)</span>
	</div>
</div>
</body>
</html>